$(document).ready(function () {

    // 处理 .inner1 里的幻灯片逻辑
    (function () {
        let $right = $('.inner1 .right')
        let left_btn = $right.find('.btn_l')
        let right_btn = $right.find('.btn_r')

        // 初始化数据
        let nth = 1;
        let a_current = null
        let i_current = null

        function apply_current() {
            if (a_current) {
                a_current.removeClass('active')
            }
            if (i_current) {
                i_current.removeClass('active')
            }

            a_current = $right.find(`> a:nth-child(${nth})`);
            i_current = $right.find(`.balls i:nth-child(${nth})`);
            a_current.addClass('active')
            i_current.addClass('active')
        }
        apply_current()

        left_btn.click(function () {
            if (nth === 1) {
                nth = 8
            } else {
                nth -= 1;
            }
            apply_current()
        });

        right_btn.click(function () {
            if (nth === 8) {
                nth = 1
            } else {
                nth += 1;
            }
            apply_current()
        });

        $right.find('.balls i').mouseover(function () {
            let index = $right.find('.balls i').index(this)
            nth = index + 1
            apply_current()
        });
    })();

    // 处理 .inner2 里的幻灯片逻辑
    (function() {
        let btn_l = $('.inner2 .btn_l');
        let btn_r = $('.inner2 .btn_r');
        let ul = $('.inner2 > ul');

        let num = 0
        let slide_count = Math.floor(ul.children('li').length/4)
        let slide_width = 995;
        let btn_locked = false;

        function change_margin_left(_btn) {
            btn_locked = true;
            let margin_left = -slide_width * num;

            if (_btn == 'r' && num == slide_count) {
                ul.children('li').slice(0, 4).each(function () {
                    let _this = this.cloneNode(true)
                    _this.className = 'added';
                    ul.append(" " + _this.outerHTML + " ")
                });
                ul.transition({'margin-left': `${margin_left}px`}, 800, function () {
                    num = 0;
                    ul.css('margin-left', 0)
                    ul.find('>li.added').remove();
                    btn_locked = false;
                });
            } else if (_btn == 'l' && num == -1) {
                ul.children('li').get().reverse().slice(0, 4).forEach(function (li) {
                    let _this = li.cloneNode(true)
                    _this.className = 'added';
                    ul.prepend(" " + _this.outerHTML + " ")
                });
                ul.css('margin-left', `-${slide_width}px`)
                ul.transition({'margin-left': '0'}, 800, function () {
                    num = slide_count - 1;
                    ul.css('margin-left', `${-slide_width*num}px`)
                    ul.find('>li.added').remove();
                    btn_locked = false;
                });
            } else {
                ul.transition({'margin-left': `${margin_left}px`}, 800, function () {
                    btn_locked = false;
                });
            }
        }

        btn_l.click(function () {
            if (btn_locked) {
                return false;
            }
            num -= 1;
            change_margin_left('l')
        });

        btn_r.click(function () {
            if (btn_locked) {
                return false;
            }
            num += 1;
            change_margin_left('r')
        });
    })();

});